<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- meta:desc -->
  <meta name="description" content="儿童心理疗愈平台">
  <!-- meta:kw -->
  <meta name="keywords" content="儿童心理疗愈平台">
  <title>儿童心理疗愈平台</title>
  <!-- link:favicon -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <!-- 快捷导航 -->
  <div class="shortcut">
    <div class="wrapper">
      <ul>
        <li><a href="#" class="login">请先登录</a></li>
        <li><a href="#">免费注册</a></li>
        <li><a href="#">在线客服</a></li>
        <li><a href="#"><span class="iconfont icon-mobile-phone"></span>手机版</a></li>
      </ul>
    </div>
  </div>

  <!-- 头部 -->
  <div class="header wrapper">
    <!-- logo -->
    <div class="logo">
      <h1><a href="#">儿童心理疗愈平台</a></h1>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <ul>
        <li><a href="main.html">首页</a></li>
        <li><a href="asker.html">心理咨询</a></li>
      </ul>
    </div>
  </div>

  <!-- banner -->
  <div class="banner">
    <div class="wrapper">
      <!-- 图片 -->
      <ul>
        <div  class="carousel" >
          <li><a href="#"><img src="./uploads/student1.jpg" alt="" class="active"></a></li>
          <li><a href="#"><img src="./uploads/student2.jpg" alt=""></a></li>
          <li><a href="#"><img src="./uploads/student3.jpg" alt=""></a></li>
          <li><a href="#"><img src="./uploads/student4.jpg" alt=""></a></li>
          <li><a href="#"><img src="./uploads/student5.jpg" alt=""></a></li>
        </div>
      </ul>
    </div>
  </div>

  <!-- 新鲜好物 -->
  <div class="goods wrapper">
    <!-- 标题 -->
    <div class="title">
      <div class="left">
        <h3>益智小游戏</h3>
      </div>
      <div class="right">
        <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
      </div>
    </div>
    <!-- 内容 -->
    <div class="bd">
      <ul>
        <li>
          <a href="five.html">
            <div class="pic"><img src="./uploads/game1.png" alt=""></div>
            <div class="txt">
              <h4>五子棋小游戏</h4>
              <span>棋艺对决，智谋比拼，连珠成线，谁能称霸棋坛？</span>
            </div>
          </a>
        </li>
        <li>
          <a href="GreedySnake.html">
            <div class="pic"><img src="./uploads/game2.png" alt=""></div>
            <div class="txt">
              <h4>贪吃蛇小游戏</h4>
              <span>蜿蜒前进，挑战极限，谁能成为最长贪吃蛇？</span>
            </div>
          </a>
        </li>
        <li>
          <a href="five.html">
            <div class="pic"><img src="./uploads/game3.png" alt=""></div>
            <div class="txt">
              <h4>开心消消乐</h4>
              <span>缤纷糖果，消除狂欢，挑战你的视觉极限！</span>
            </div>
          </a>
        </li>
        <li>
          <a href="five.html">
            <div class="pic"><img src="./uploads/game4.png" alt=""></div>
            <div class="txt">
              <h4>飞行棋</h4>
              <span>飞行冒险，掷骰闯关，谁将勇夺冠军宝座？</span>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>

  <div class="recommend wrapper">
    <!-- 标题 -->
    <div class="title">
      <div class="left">
        <h3>图书角</h3>
        <p>人精选读物 不容错过</p>
      </div>
    </div>
    <!-- 内容 -->
    <div class="bd">
      <ul>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/book1.png" alt=""></div>
            <div class="txt">
              <h4>大卫不可以</h4>
              <p>通过调皮小男孩大卫的故事，教导孩子们行为规范和生活常识的温馨儿童绘本。</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/book2.png" alt=""></div>
            <div class="txt">
              <h4>小青蛙的梦想</h4>
              <p>讲述了一只小青蛙追逐梦想、勇敢前行的温馨故事，激励孩子们勇敢追求自己的目标。</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/book3.png" alt=""></div>
            <div class="txt">
              <h4>小猪变形记</h4>
              <p>讲述了一只小猪通过各种变身经历，最终明白做自己才是最好的快乐故事。</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/book4.png" alt=""></div>
            <div class="txt">
              <h4>点心去哪了</h4>
              <p>讲述了一段充满趣味和悬念的点心失踪案，带领孩子们一起探索谜底并享受解谜的快乐。</p>
            </div>
          </a>
        </li>
        
      </ul>
    </div>
  </div>

  <!-- 热门品牌 -->
  <div class="brand">
    <div class="wrapper">
      <!-- 标题 -->
      <div class="title">
        <div class="left">
          <h3>DIY手工</h3>
          <p>锻炼手脑灵活度</p>
        </div>

        <div class="button">
          <a href="#" class="prev">
            <i class="iconfont icon-arrow-left-bold"></i>
          </a>
          <a href="#" class="next">
            <i class="iconfont icon-arrow-right-bold"></i>
          </a>
        </div>
      </div>
      <!-- 内容 -->
      <div class="bd">
        <ul>
          <li><a href="#"><img src="./uploads/diy1.png" alt=""></a></li>
          <li><a href="#"><img src="./uploads/diy2.png" alt=""></a></li>
          <li><a href="#"><img src="./uploads/diy3.png" alt=""></a></li>
          <li><a href="#"><img src="./uploads/diy4.png" alt=""></a></li>
          <li><a href="#"><img src="./uploads/diy5.png" alt=""></a></li>
        </ul>
      </div>
    </div>
  </div>

  

  <!-- 最新专题 -->
  <div class="topic wrapper">
    <div class="title">
      <div class="left">
        <h3>安全知识</h3>
      </div>
      <div class="right">
        <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
      </div>
    </div>
    <div class="topic-bd">
      <ul>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/topic1.png" alt="">
              <!-- 定位区域 -->
              <div class="cover">
                <div class="left">
                  <h4>儿童安全教育第一课</h4>
                  <p>兔小贝安全教育 </p>
                </div>
              </div>
            </div>
            <div class="txt">
              <div class="left">
                <p>
                  <i class="iconfont icon-favorites-fill"></i>
                  <span>1220</span>
                </p>
                <p>
                  <i class="iconfont icon-browse"></i>
                  <span>1800</span>
                </p>
              </div>
              <div class="right">
                <p>
                  <i class="iconfont icon-comment"></i>
                  <span>246</span>
                </p>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/topic2.png" alt="">
              <!-- 定位区域 -->
              <div class="cover">
                <div class="left">
                  <h4>预防儿童意外伤害是每个监护人首要任务 </h4>
                  <p>预防儿童意外伤害第一篇</p>
                </div>
              </div>
            </div>
            <div class="txt">
              <div class="left">
                <p>
                  <i class="iconfont icon-favorites-fill"></i>
                  <span>1220</span>
                </p>
                <p>
                  <i class="iconfont icon-browse"></i>
                  <span>1800</span>
                </p>
              </div>
              <div class="right">
                <p>
                  <i class="iconfont icon-comment"></i>
                  <span>246</span>
                </p>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/topic3.png" alt="">
              <!-- 定位区域 -->
              <div class="cover">
                <div class="left">
                  <h4>消防安全知识对于儿童来说至关重要</h4>
                  <p>消防安全知识</p>
                </div>
              </div>
            </div>
            <div class="txt">
              <div class="left">
                <p>
                  <i class="iconfont icon-favorites-fill"></i>
                  <span>1220</span>
                </p>
                <p>
                  <i class="iconfont icon-browse"></i>
                  <span>1800</span>
                </p>
              </div>
              <div class="right">
                <p>
                  <i class="iconfont icon-comment"></i>
                  <span>246</span>
                </p>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>

  <script>
    let currentIndex = 0;
    const images = document.querySelectorAll('.carousel img');
    const totalImages = images.length;
  
    function showNextImage() {
      images[currentIndex].classList.remove('active');
      currentIndex = (currentIndex + 1) % totalImages;
      images[currentIndex].classList.add('active');
    }
  
    setInterval(showNextImage, 3000); // 每3秒切换一次图片
  </script>
</body>

</html>